<template>
	<view class="monitor-control">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">监测防控</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<template v-if="appHeight > 0">
				<mapView @mapDone="mapDone" ref="mapView" defaultBase="vec"> </mapView>
			</template>
			<view class="left-list">
				<view class="type-select-row">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(0, 2)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<!-- 彩色 -->
						<!-- <svg class="icon svg-icon" style="color: #fff" aria-hidden="true">
							<use xlink:href="#icon-a-bianzu69"></use>
						</svg> -->
						<view style="width: 30rpx; height: 30rpx" class="flex-cc">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15"> {{ item.name }}</text>
					</view>
				</view>

				<view class="type-select-row mt20">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(2, 6)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<view style="width: 30rpx; height: 30rpx" class="flex-cc">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15"> {{ item.name }}</text>
					</view>
				</view>

				<view class="type-select-row mt20">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(6, 8)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<view style="width: 30rpx; height: 30rpx" class="flex-cc" @click="iconTyCG(item)">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15" @click="iconTyCG(item)"> {{ item.name }}</text>
						<!-- <template v-if="type == item.value && type != 'typhoon'">
							<playCpn :data="item.list" @change="(e) => playEV(e, item.value)" class="ml15"></playCpn>
						</template> -->
					</view>
				</view>

				<view class="type-select-row mt20">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(8, 9)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<view style="width: 30rpx; height: 30rpx" class="flex-cc">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15"> {{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="right-list">
				<listSelect :list="hourList" v-model="accHour"></listSelect>
			</view>
			<!-- 图例时间轴 -->
			<view class="botBox-list">
				<view class="slider-box" v-if="type == 'cloud'">
					<playTimeSlider :splitIndex="2" :items="cloudList" ref="cloudSlider" @change="playCloud"></playTimeSlider>
				</view>
				<view class="slider-box" v-if="type == 'radar'">
					<playTimeSlider :splitIndex="2" :items="radarList" ref="radarSlider" @change="playRadar"></playTimeSlider>
				</view>
				<view class="legend-list" v-show="legendShow">
					<view v-for="(item, index) in selectLegendList" :key="index" class="legend-box">
						<simpleLegend :isNoCilck="true" :legendOptions="item" :legendData="item.legendData"></simpleLegend>
					</view>

					<!-- 自定义图例 -->
					<template v-if="type == 'water'">
						<view class="water-legend">
							<view class="flex-cc">
								<image src="../../static/image/map/swz.png" mode="widthFix" style="width: 40rpx; height: 40rpx" />
								<text class="ml10">水位站</text>
							</view>

							<view class="flex-cc">
								<image
									src="../../static/image/map/swenz.png"
									class="ml10"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">水文站</text>
							</view>
							<view class="flex-cc">
								<image
									src="../../static/image/map/cjj.png"
									class="ml10"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超警戒</text>
							</view>
							<view class="flex-cc">
								<image
									src="../../static/image/map/cbz.png"
									class="ml10"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超保证</text>
							</view>
						</view>
					</template>
					<template v-if="type == 'work'">
						<view class="water-legend">
							<view class="flex-cc">
								<image src="../../static/image/map/work-sk.png" mode="widthFix" style="width: 40rpx; height: 40rpx" />
								<text class="ml10">水库</text>
							</view>

							<view class="flex-cc">
								<image
									src="../../static/image/map/work-cxx.png"
									class="ml20"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超汛限</text>
							</view>
							<view class="flex-cc">
								<image
									src="../../static/image/map/work-cfhg.png"
									class="ml20"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超正常高</text>
							</view>
						</view>
					</template>
					<template v-if="type == 'video'">
						<view class="water-legend">
							<view class="flex-cc">
								<image
									src="../../static/image/map/video-cg.png"
									mode="widthFix"
									style="width: 30rpx; max-height: 40rpx"
								/>
								<text class="ml10">城管监控</text>
							</view>

							<view class="flex-cc">
								<image
									class="ml20"
									src="../../static/image/map/video-sl.png"
									mode="widthFix"
									style="width: 30rpx; max-height: 40rpx"
								/>
								<text class="ml10">水利监控</text>
							</view>
						</view>
					</template>
					<template v-if="type == 'dzd'">
						<view class="water-legend">
							<view class="flex-cc">
								<image src="../../static/image/map/dzd-bt.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">崩塌</text>
							</view>
							<view class="flex-cc">
								<image src="../../static/image/map/dzd-dmbt.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">地面崩塌</text>
							</view>
							<view class="flex-cc">
								<image src="../../static/image/map/dzd-nsl.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">泥石流</text>
							</view>
							<view class="flex-cc">
								<image src="../../static/image/map/dzd-hp.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">滑坡</text>
							</view>
							<view class="flex-cc">
								<image src="../../static/image/map/dzd-gdbp.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">高陡边坡</text>
							</view>
						</view>
					</template>
				</view>
			</view>

			<!-- 图例图层图标 -->
			<view class="bot-type-list">
				<view class="icon-type" style="width: 80rpx" @click="popupShow = true">
					<i :class="`iconfont icon-a-Vector4 fs24`" style="color: #607589"></i>
					<text class="mt10 text nop fs26"> 图层</text>
				</view>

				<view
					class="icon-type mt20"
					style="width: 80rpx"
					:class="{ 'icon-type-ac': legendShow }"
					@click="legendShow = !legendShow"
				>
					<i :class="`iconfont icon-fenlei  fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 图例</text>
				</view>
			</view>

			<view class="noTf" v-show="type == 'typhoon'">当前无台风</view>
		</view>
		<!-- 图层popup -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="14" closeable close-icon="arrow-down-fill">
			<view class="bottom-map-base">
				<i :class="`iconfont icon-a-Vector4 fs24`" style="color: #0085ff"></i>
				<text class="ml20 fs32">图层</text>
			</view>
			<view style="width: 750rpx; height: 150rpx; padding: 20rpx 10rpx 0 80rpx">
				<u-checkbox-group width="220rpx">
					<u-checkbox
						@change="changeBase"
						v-model="item.checked"
						v-for="(item, index) in baseList"
						:key="item.value"
						:name="item.value"
						>{{ item.name }}</u-checkbox
					>
				</u-checkbox-group>
			</view>
		</u-popup>

		<!-- 站点点击弹窗 -->
		<u-popup v-model="sitePopupShow" mode="bottom" border-radius="14" closeable close-icon="arrow-down-fill">
			<view class="bottom-map-base">
				<i class="iconfont icon-Vector1" style="color: #0085ff"></i>
				<text class="ml20 fs32">{{ clickItem.stnm }}</text>
				<text class="ml10 fs32">{{ clickItem.stcd }}</text>
			</view>
			<view style="width: 750rpx; flex-wrap: wrap" class="flex-sa mt10">
				<block-card
					:width="selfDataList.length > 4 ? '240rpx' : '175rpx'"
					:data="i"
					v-for="(i, index) in selfDataList"
					:key="index"
				></block-card>
			</view>

			<view style="width: 750rpx; height: 430rpx">
				<waterEc :options="ecData"></waterEc>
			</view>
		</u-popup>
		<!-- 视频modal   -->
		<u-modal
			v-model="videoShow"
			:show-title="false"
			:show-confirm-button="false"
			:mask-close-able="true"
			width="750rpx"
		>
			<view class="slot-content-modal">
				<video src="https://qz.qzqxw.com/openUrl/hMRCoEg/live.m3u8" style="width: 750rpx" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import tool from '@/utils/tool.js'
	import simpleLegend from '@/components/common/simpleLegend.vue'
	import controlApi from '@/api/monitor/control.js'
	import moment from 'moment'
	import cbz from '../../static/image/map/cbz.png'
	export default {
		components: {
			simpleLegend,
			playCpn: () => import('@/components/common/play.vue'),
			'tui-bubble-popup': () => import('@/components/common/tui-bubble-popup.vue'),
			'block-card': () => import('@/components/home/block-card.vue'),
			waterEc: () => import('@/components/home/waterEc.vue'),
			listSelect: () => import('@/components/common/select/listSelect.vue'),
			playTimeSlider: () => import('@/components/common/playTimeSlider.vue')
		},

		data() {
			return {
				appHeight: 0,
				type: '',
				layerGroups: {},
				// isSync 是否开启同步，意思就是能否同时存在

				leftTopList: [
					{
						name: '色斑图',
						value: 'spot',
						isSync: false,
						icon: 'icon-a-Group992',
						isActive: true,
						legendList: []
					},
					{
						name: '雨    情',
						value: 'rain',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: [tool.getLegendOptionsByKey('Rain'), tool.getLegendOptionsByKey('RainSingle')]
					},
					{
						name: '水    情',
						value: 'water',
						isSync: false,
						icon: 'icon-a-heliumian1',
						isActive: false,
						legendList: []
					},
					{
						name: '工    情',
						value: 'work',
						icon: 'icon-a-dazhongxingshuiku1',
						isSync: false,
						isActive: false,
						legendList: []
					},
					{
						name: '视频监控',
						value: 'video',
						icon: 'icon-a-shipinzixun1',
						isSync: false,
						isActive: false,
						legendList: []
					},
					{
						name: '地灾点',
						value: 'dzd',
						icon: 'icon-a-dizhenzaihaifengxianqu1',
						isSync: false,
						isActive: false,
						legendList: []
					},
					{
						name: '雷    达',
						value: 'radar',
						icon: 'icon-Vector',
						isSync: false,
						isActive: false,
						list: [],
						legendList: [tool.getLegendOptionsByKey('radar37')]
					},
					{
						name: '云    图',
						value: 'cloud',
						icon: 'icon-a-Vector1',
						isSync: false,
						isActive: false,
						list: [],
						legendList: [tool.getLegendOptionsByKey('redCloud')]
					},
					{
						name: '台    风',
						value: 'typhoon',
						icon: 'icon-a-taifeng1',
						isSync: false,
						isActive: false,
						isPlay: false,
						legendList: []
					}
				],

				// 时间轴
				cloudList: [],
				radarList: [],

				hourList: [
					{ label: '近1小时', value: 1 },
					{ label: '近3小时', value: 3 },
					{ label: '近6小时', value: 6 },
					{ label: '近12小时', value: 12 },
					{ label: '近24小时', value: 24 }
				],
				accHour: 24,

				legendShow: true,

				popupShow: false,
				sitePopupShow: false,
				clickItem: {},
				selfDataList: [],
				ecData: {},

				baseList: [
					{ name: '行政区域', checked: true, value: '1' },
					{ name: '水系', checked: false, value: '2' },
					{ name: '水电站', checked: false, value: '3' },
					{ name: '水闸', checked: false, value: '4' },
					{ name: '泵站', checked: false, value: '5' },
					{ name: '堤防', checked: false, value: '6' }
				],

				videoShow: false
			}
		},
		computed: {
			selectLegendList() {
				let list = this.leftTopList
				let le = list.find((item) => item.value == this.type)
				return le ? le.legendList : []
			}
		},
		onLoad(options) {
			if (options && options.type) {
				// this.type = options.type
				this.initPage(options.type)
			}
		},
		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
		},
		methods: {
			mapDone(map) {
				this.map = map
				// 初始化图层组
				this.mapGroups = L.baseLayerGroup().addTo(map)

				const addLayerEv = (key) => {
					let layer = L.baseLayerGroup()
					layer.key = key
					this.mapGroups.addLayer(layer)
					return layer
				}
				// 初始化图层组-小类
				this.layerGroups = {
					rain: addLayerEv('rain'),
					water: addLayerEv('water'),
					work: addLayerEv('work'),
					video: addLayerEv('video'),
					dzd: addLayerEv('dzd'),

					radar: addLayerEv('radar'),
					cloud: addLayerEv('cloud'),
					typhoon: addLayerEv('typhoon'),

					base: addLayerEv('base'),

					alone: addLayerEv('alone')
				}
				// this.initPage()
			},
			async initPage(type) {
				// 获取所有站点
				const resp = await controlApi.getAll()
				const item = this.leftTopList.find((item) => item.value == type)
				this.iconTyCG(item)
			},
			// 现在是单选模式
			iconTyCG(item) {
				if (item.value == this.type) {
					return
				}
				// 现在是单选模式
				this.type = item.value
				this.leftTopList.map((el) => {
					el.isActive = false
					if (item.value == el.value) {
						el.isActive = true
					}
				})

				if (this.layerGroups.alone) {
					this.layerGroups.alone.clearLayers()
				}

				switch (item.value) {
					case 'spot':
						this.initByspot()
						break
					case 'rain':
						// this.initByrain()
						break
					case 'cloud':
						this.initBycloud()
						break
					case 'radar':
						this.initByradar()
						break
					case 'water':
						this.initBywater()
						break
					case 'work':
						this.initBywork()
						break
					case 'video':
						this.initByvideo()
						break
				}
			},
			// 色斑图
			initByspot() {},
			// 雨情
			async initByrain() {
				const resp = await controlApi.GetMonitoringLiveForecastDatas({
					isValAsc: false,
					timeCategory: 'live',
					timeType: '0',
					accHour: 24,
					areaCode: '350500',
					element: 'Rain',
					legendType: 'Rain'
				})
				const { data } = resp
				// if (!this.siteLayer) {
				this.siteLayer = L.featureGroup.collision({ margin: 20 }).addTo(this.layerGroups.alone)
				// }
				let legend = tool.getLegendItem('Rain')
				console.info(`legend:`, legend)
				data.mapSites.siteDatas.forEach((sin) => {
					const { bgColor, index } = tool.getColorIndex(legend, sin.value1)
					let fontColor = '#000' // 默认黑色
					if (index > 1) {
						fontColor = '#fff'
					}
					const divMark1 = L.marker([sin.lat, sin.lon], {
						icon: L.divIcon({
							// iconAnchor: [0, 20],
							className: 'map-town-legend-style',
							// iconAnchor: [0, 30],
							// iconSize: [35, 20],
							html: `
		                           <div class='map-town-legend'>
		                       <div class='siteName'>${sin.siteName}</div>
		                       <div class='value' style='background:${bgColor};color:${fontColor}'>
		                       ${sin.value1}${legend.unit}
		                       </div>
		                           </div>`
						})
					})
						.on('click')

						.addTo(this.siteLayer)
				})
			},
			// 云图
			async initBycloud() {
				this.cloudList = []
				uni.showLoading({
					title: '正在加载'
				})
				try {
					const siteNos = await controlApi.GetCloudSites()
					if (siteNos.success && siteNos.data.length > 0) {
						const site = siteNos.data[0]
						const resp = await controlApi.GetCloudDatas({
							siteNo: site.siteNo, //'FY2G_SEC_IR1_LCN',
							dataTypeId: site.dataTypeId
						})
						this.$hideLoading()
						this.imageOverlayr = null
						if (resp.success) {
							const { data } = resp
							this.cloudList = data.map((item, index) => {
								item.index = index
								item.desc = moment(item.cTime).format('HH:mm')
								return item
							})
							// this.leftTopList[7].list = cloudList
							// this.playCloud(0, true)
							this.$nextTick(() => {
								this.$refs.cloudSlider.setIndex(this.cloudList.length - 1)
							})
						} else {
							this.$hideLoading()
							// uni.showToast({
							// 	icon: 'error',
							// 	title: '获取失败'
							// })
						}
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			playCloud(index, fit) {
				let playData = this.cloudList[index]
				if (!playData) {
					return
				}
				var bounds = [
					[-0.65, 147.637],
					[60.618, 72.319]
				]

				let groups = this.layerGroups.alone
				const url = playData.filePath
				if (!this.imageOverlayr) {
					this.imageOverlayr = L.imgLayer(url, bounds, {
						pane: 'tilePane',
						className: 'demo'
					}).addTo(groups)
					// console.info(`initCloundLayer:`);
					//
				} else {
					this.imageOverlayr.setBounds(bounds)
					this.imageOverlayr.setUrl(url)
				}
				// this.map.flyTo([24.908853, 118.589421], 5)
				// this.setTitle(playData.title + " 云图", "yt");
				var polygon = L.polygon(bounds)
				if (fit) {
					this.map.fitBounds(polygon.getBounds())
				}
			},

			// playEV(index, type) {
			// 	if (type == 'cloud') {
			// 		this.playCloud(index)
			// 	} else {
			// 		this.playRadar(index)
			// 	}
			// },
			// 雷达
			async initByradar() {
				this.radarList = []
				uni.showLoading({
					title: '正在加载'
				})
				try {
					const resp = await controlApi.GetRadarDatas({
						dataTypeId: 2,
						siteNos: 'Z9595',
						productId: 37
					})
					this.radarImg = null
					this.$hideLoading()
					if (resp.success) {
						const { data } = resp
						this.radarList = data.siteImageItems['z9595'].map((item, index) => {
							item.index = index
							item.desc = moment(item.cTime).format('HH:mm')
							return item
						})
						this.$nextTick(() => {
							this.$refs.radarSlider.setIndex(this.radarList.length - 1, true)
						})
					} else {
						this.$hideLoading()
						// uni.showToast({
						// 	icon: 'error',
						// 	title: '获取失败'
						// })
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			playRadar(index, fit) {
				// this.$slots.default
				let playData = this.radarList[index]
				if (!playData) {
					return
				}
				var bounds = [
					[playData.latMin, playData.lonMax],
					[playData.latMax, playData.lonMin]
				]
				// var bounds = [
				// 	[-0.65, 147.637],
				// 	[60.618, 72.319]
				// ]

				let group = this.layerGroups.alone
				const url = playData.filePath
				if (!this.radarImg) {
					this.radarImg = L.imgLayer(url, bounds, {
						pane: 'tilePane',
						className: 'demo'
					}).addTo(group)
					// console.info(`initCloundLayer:`);
					//
				} else {
					this.radarImg.setBounds(bounds)
					this.radarImg.setUrl(url)
				}
				// this.map.flyTo([24.908853, 118.589421], 5)
				// this.setTitle(playData.title + " 云图", "yt");
				var polygon = L.polygon(bounds)
				if (fit) {
					this.map.fitBounds(polygon.getBounds())
				}
			},
			// 水
			async initBywater() {
				const geoJSON = await controlApi.getWaterSites()
				const features = geoJSON.features

				this.siteLayer = L.featureGroup().addTo(this.layerGroups.alone)

				features.forEach((item) => {
					let sin = item.properties
					let lat = item.geometry.coordinates[1]
					let lon = item.geometry.coordinates[0]
					let tip = `
		         <div class='map-water-legend'>
		                       <div class='siteName'>永安</div>
		                       <div class='date'>2022-06-13 19:05:00</div>
		                       <div>水位:166.6米</div>
		                       <div>警戒水位:166.6米</div>
		                       <div>保证水位:166.6米</div>
		                       </div>
		         `
					const dataMaker = L.marker([lat, lon], {
						icon: L.divIcon({
							// iconAnchor: [0, 20],
							className: 'map-town-legend-style',
							// iconAnchor: [0, 30],
							iconSize: [25, 25],
							html: `<img src="/static/image/map/swenz.png" style='width:25px' alt="" srcset=""/>`
						})
					})
						.on('click', (e) => {
							const itemData = e.target.data
							this.clickItem = itemData
							// console.info(`e:`, e)
							this.sitePopupShow = true
							this.$nextTick(() => {
								this.getWaterInfoBySite(itemData.stcd)
							})
						})
						// .bindPopup(tip)
						.addTo(this.siteLayer)
					dataMaker.data = sin
				})
			},
			// 获取水文站具体数值
			async getWaterInfoBySite(nodeId, type = 'sk') {
				const apiType = {
					swen: {
						info: 'WPStationRR',
						monitorData: 'WPStationZQ',
						nodeId: 70900550,
						nodeId2: 70900601
					},
					sw: {
						info: 'WPStationZZ',
						monitorData: 'WPStationZZ',
						nodeId: 71010606,
						nodeId2: 71010606
					},
					sk: {
						info: 'WPStationRR',
						monitorData: 'WPStationRR',
						nodeId: 71011008,
						nodeId2: 71011008
					},
					rain: {
						monitorData: 'WPStationPP',
						nodeId: 70927106,
						nodeId2: 70927106
					}
				}
				const post = {}
				const info = await controlApi.getInfo({
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					nodeId: apiType[type].nodeId,
					nodeType: apiType[type].info
				})
				const monitorData = await controlApi.getMonitorData({
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					nodeId: apiType[type].nodeId2,
					nodeType: apiType[type].monitorData,
					begin: '2023-03-27 15:00:00',
					end: '2023-03-28 15:00:00'
				})
				const { table, option } = this.dealDataEv(info.data, monitorData.data, false)
				this.ecData = option
				this.selfDataList = table
			},

			// 处理数据
			// 基本信息，时序图，是否是水情，目前就两种
			dealDataEv(info, monitorData, isWater = true) {
				// outq:出库流量，inq:入库流量，q:流量，z:水位，drp：雨量
				// , inq: '入库流量', q: '流量', z: '水位', drp: '雨量'
				const typeObj = {
					outq: { name: '出库流量', color: '#FF6B00' },
					inq: { name: '入库流量', color: '#3FD1B8' },
					q: { name: '流量', color: '#FF6B00' },
					z: { name: '水位', color: '#0085FF' },
					drp: { name: '雨量', color: '#0085FF' },

					alarmZ: { name: '警戒水位', color: '#FFC700' },
					guarantyZ: { name: '保证水位', color: '#FF0000' },
					floodLevel: { name: '汛限水位', color: '#FFC700' },
					floodHighLevel: { name: '防洪高水位', color: '#FF0000' }
				}

				// 图块 和图表数据，最后返回这两个
				let table = []
				let option = {}

				// 先处理时间
				Object.keys(monitorData).forEach((key) => {
					monitorData[key].map((t) => {
						t.time = moment(t.time).format('YYYY-MM-DD HH:mm')
						return t
					})
				})

				const findMaxAndMin = (list) => {
					if (!list || list.length == 0) {
						return {
							max: { time: '-', value: '-' },
							min: { time: '-', value: '-' }
						}
					}
					const max = list.reduce((prev, curr) => (prev.value > curr.value ? prev : curr))
					const min = list.reduce((prev, curr) => (prev.value < curr.value ? prev : curr))
					return { max, min }
				}

				// 寻找值
				const findInfoItemByKey = (key) => {
					try {
						const infoData = info
						let fieldList = infoData.template.fieldList
						const result = fieldList.find((el) => el.name == key)
						if (result) {
							return result
						} else {
							throw new Error()
						}
					} catch (error) {
						return {
							defaultValue: '-',
							name: null,
							show: null,
							type: null
						}
					}
				}

				if (isWater) {
					// 生成最高最低最大最小
					const qmaxmin = findMaxAndMin(monitorData.q)
					const zmaxmin = findMaxAndMin(monitorData.z)
					table = [
						{ name: '最高水位', value: zmaxmin.max.value || '-', unit: 'mm', date: zmaxmin.max.time || '-' },
						{ name: '最低水位', value: zmaxmin.min.value || '-', unit: 'mm', date: zmaxmin.min.time || '-' },
						{ name: '最大流量', value: qmaxmin.max.value || '-', unit: 'm³/s', date: qmaxmin.max.time || '-' },
						{ name: '最小流量', value: qmaxmin.min.value || '-', unit: 'm³/s', date: qmaxmin.min.time || '-' }
					]
				} else {
					// 生成最高最低最大最小
					const zmaxmin = findMaxAndMin(monitorData.z)
					const inqmaxmin = findMaxAndMin(monitorData.inq)
					const outqmaxmin = findMaxAndMin(monitorData.outq)
					table = [
						{ name: '最高水位', value: zmaxmin.max.value || '-', unit: 'mm', date: zmaxmin.max.time || '-' },
						{ name: '最低水位', value: zmaxmin.min.value || '-', unit: 'mm', date: zmaxmin.min.time || '-' },
						{ name: '最大入库流量', value: inqmaxmin.max.value || '-', unit: 'm³/s', date: inqmaxmin.max.time || '-' },
						{ name: '最小入库流量', value: inqmaxmin.min.value || '-', unit: 'm³/s', date: inqmaxmin.min.time || '-' },
						{
							name: '最大出库流量',
							value: outqmaxmin.max.value || '-',
							unit: 'm³/s',
							date: outqmaxmin.max.time || '-'
						},
						{ name: '最小出库流量', value: outqmaxmin.min.value || '-', unit: 'm³/s', date: outqmaxmin.min.time || '-' }
					]
				}

				// 处理图表

				let xdata = []
				const series = []
				const legendName = []

				Object.keys(monitorData).forEach((key) => {
					let obj = typeObj[key]
					legendName.push(obj.name)

					let sinOps = {}
					// 雨量是柱状图
					if (key == 'drp') {
						sinOps = {
							name: obj.name,
							data: monitorData[key].map((e) => e.value || '-'),
							symbol: 'none',
							itemStyle: {
								color: obj.color,
								lineStyle: {
									width: 2,
									color: obj.color
								}
							},
							type: 'bar',
							smooth: true
						}
					} else {
						sinOps = {
							name: obj.name,
							data: monitorData[key].map((e) => e.value || '-'),
							symbol: 'none',
							yAxisIndex: ['流量', '出库流量', '入库流量'].includes(obj.name) ? 1 : 0,
							itemStyle: {
								color: obj.color,
								lineStyle: {
									width: 2,
									color: obj.color
								}
							},
							type: 'line',
							smooth: true
						}
					}
					series.push(sinOps)
					// xdata长度
					xdata = monitorData[key].map((item) => item.time)
				})

				let otherProps = []
				if (isWater) {
					otherProps = ['alarmZ', 'guarantyZ']
				} else {
					otherProps = ['floodLevel', 'floodHighLevel']
				}
				// 加载其他额外字段
				otherProps.forEach((key) => {
					const porps = findInfoItemByKey(key)
					if (porps.name) {
						let obj = typeObj[key]
						legendName.push(obj.name)
						series.push({
							name: obj.name,
							data: new Array(xdata.length).fill(porps.defaultValue || '-'),
							symbol: 'none',
							itemStyle: {
								color: obj.color,
								lineStyle: {
									width: 2,
									color: obj.color
								}
							},
							type: 'line',
							smooth: true
						})
					}
				})

				option = {
					xAxis: {
						data: xdata,
						axisLabel: {
							show: true,
							showMaxLabel: true,
							textStyle: {
								color: '#A0A0A0'
							},
							formatter: function (value, index) {
								return moment(value).format('HH:mm')
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						// name: "日期",
						axisTick: {
							show: false
						},
						type: 'category',
						nameTextStyle: {
							color: '#A0A0A0'
						}
					},
					yAxis: [
						{
							axisLabel: {
								show: true,
								textStyle: {
									color: '#A0A0A0'
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							name: '水位(m)',
							axisTick: {
								show: false
							},
							splitLine: {
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							type: 'value',
							nameTextStyle: {
								color: '#A0A0A0'
							}
						},
						{
							position: 'right',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#A0A0A0'
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							name: '流量(m³/s)',
							axisTick: {
								show: false
							},
							splitLine: {
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							type: 'value',
							nameTextStyle: {
								color: '#A0A0A0'
							}
						}
					],
					legend: {
						data: legendName,
						bottom: '0',
						textStyle: {
							fontSize: 10
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: (params) => {
							var relVal = params[0].name
							for (var i = 0, l = params.length; i < l; i++) {
								let unit = 'm'
								if (['流量', '出库流量', '入库流量'].includes(params[i].seriesName)) {
									unit = 'm³/s'
								}
								relVal += '<br/>' + params[i].marker + params[i].seriesName + ':' + (params[i].value || '-') + unit
							}
							return relVal
						}
					},
					grid: {
						top: '15%',
						left: '10%',
						bottom: '24%',
						right: '10%'
					},
					series: series
				}
				return { table, option }
			},

			// 工
			async initBywork() {
				const geoJSON = await controlApi.getWorkSites()
				const { data } = resp
				this.siteLayer = L.featureGroup().addTo(this.layerGroups.alone)
				data.mapSites.siteDatas.slice(0, 100).forEach((sin) => {
					let tip = `
		         <div class='map-water-legend'>
		                       <div class='siteName'>永安</div>
		                       <div class='date'>2022-06-13 19:05:00</div>
		                       <div>水位:166.6米</div>
		                       <div>警戒水位:166.6米</div>
		                       <div>保证水位:166.6米</div>
		                       </div>
		         `
					L.marker([sin.lat, sin.lon], {
						icon: L.divIcon({
							// iconAnchor: [0, 20],
							className: 'map-town-legend-style',
							// iconAnchor: [0, 30],
							iconSize: [25, 25],
							html: `<img src="/static/image/map/work-sk.png" style='width:25px' alt="" srcset=""/>`
						})
					})
						.bindPopup(tip)
						.addTo(this.siteLayer)
				})
			},

			// 视频
			async initByvideo() {
				const resp = await controlApi.GetMonitoringLiveForecastDatas({
					isValAsc: false,
					timeCategory: 'live',
					timeType: '0',
					accHour: 24,
					areaCode: '350500',
					element: 'Rain',
					legendType: 'Rain'
				})
				const { data } = resp
				this.siteLayer = L.featureGroup().addTo(this.layerGroups.alone)
				data.mapSites.siteDatas.slice(0, 100).forEach((sin) => {
					let tip = `
		         <div class='map-water-legend'>
		                       <div class='siteName'>永安</div>
		                       <div class='date'>2022-06-13 19:05:00</div>
		                       <div>水位:166.6米</div>
		                       <div>警戒水位:166.6米</div>
		                       <div>保证水位:166.6米</div>
		                       </div>
		         `
					L.marker([sin.lat, sin.lon], {
						icon: L.divIcon({
							// iconAnchor: [0, 20],
							className: 'map-town-legend-style',
							// iconAnchor: [0, 30],
							iconSize: [25, 25],
							html: `<img src="/static/image/map/video-cg.png" style='width:25px' alt="" srcset=""/>`
						})
					})
						.on('click', (e) => {
							this.videoShow = true
						})
						.addTo(this.siteLayer)
				})
			},

			// 图层管理
			changeBase(target) {
				console.info(`target:`, target)
				if (target.value) {
				}
			}
		}
	}
</script>

<style lang="less">
	.app-box {
		position: relative;
		width: 100%;
	}

	.monitor-control {
		.left-list {
			position: absolute;
			z-index: 700;
			top: 15rpx;
			left: 10rpx;
			.icon-type {
				width: 150rpx;
				height: 60rpx;
			}
		}
		.right-list {
			position: absolute;
			z-index: 999;
			top: 15rpx;
			right: 10rpx;
			background: #fff;
			padding: 10rpx 20rpx;
			box-shadow: 0px 4rpx 30rpx rgba(0, 0, 0, 0.28);
			border-radius: 10rpx;
			.icon-type {
				width: 150rpx;
				height: 60rpx;
			}
		}

		.botBox-list {
			position: absolute;
			z-index: 700;
			width: 720rpx;
			bottom: 0rpx;
			left: 15rpx;
			.slider-box {
				display: flex;
				align-items: center;
				height: 87rpx;
				padding: 0 20rpx;
				width: 100%;
				background: #fff;
				margin-bottom: 10rpx;
				border-radius: 10rpx;
				box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
			}
			.legend-list {
				width: 100%;
				.legend-box {
					display: flex;
					min-height: 80rpx;
					height: fit-content;
					border-radius: 10rpx;
					box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
					width: 100%;
					background: #fefffe;
					padding: 0 7rpx;
					padding-bottom: 13rpx;
					margin-bottom: 12rpx;
					/deep/.simple-legend {
						padding: 0 4rpx;
						width: 100%;
					}
				}
			}
		}

		.bot-type-list {
			position: absolute;
			z-index: 700;
			bottom: 220rpx;
			right: 10rpx;
		}
	}
	/deep/.map-town-legend-style {
		// position: relative;
		.map-town-legend {
			position: absolute;
			display: flex;
			align-items: center;
			white-space: nowrap;
			left: 50%;
			transform: translateX(-50%);
			top: -30px;
			// min-width: 181rpx;
			height: 49rpx;
			background: #fefffe;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
			padding: 0 5px;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -14rpx;
				width: 0;
				height: 0;
				border-left: 14rpx solid transparent;
				border-right: 14rpx solid transparent;
				border-top: 14rpx solid #ffffff;
				display: block;
				transform-origin: left top;
				box-sizing: border-box;
				border-radius: 8rpx;
			}

			.siteName {
				min-width: 50rpx;
				text-align: center;
			}

			.value {
				min-width: 77rpx;
				text-align: center;
				padding: 0 5rpx;
				border-radius: 5rpx;
				margin-left: 3rpx;
			}
		}
	}
	/deep/.map-water-legend {
	}
	.diy-type {
		.diy-flex-bt {
			flex-direction: row !important;
			justify-content: space-between;
			padding: 0 15rpx;
		}
	}
	.water-legend {
		height: 122.5rpx;
		background: #fff;
		padding: 20rpx;
		margin-bottom: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		box-shadow: 0px 4rpx 30rpx rgba(0, 0, 0, 0.28);
		.ml10 {
			font-size: 24rpx;
		}
		.flex-cc {
			margin: 0 12rpx;
		}
	}
	.noTf {
		position: absolute;
		z-index: 700;
		bottom: 200rpx;
		left: 10rpx;
		background: #ffffff;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		box-shadow: 0px 4rpx 30rpx rgba(0, 0, 0, 0.28);
	}
	.bottom-map-base {
		padding: 20rpx 0 0 20rpx;
	}
	.slot-content-modal {
		width: 750rpx;
		background: #000;
	}

	.type-select-row {
		background: #fefffe;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(19, 83, 156, 0.24);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		overflow: hidden;
		font-size: 26rpx;
		height: fit-content;
		// width: 90rpx;
		color: #007aff;
		padding: 10rpx;
	}
	.icon-type-row {
		width: 100%;
		background: #fefffe;
		// box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(19, 83, 156, 0.24);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		text-align: center;
		overflow: hidden;
		padding: 10rpx 10rpx;
		font-size: 26rpx;
		margin: 3rpx 0;
		// width: 90rpx;
		color: #607589;
	}
	.icon-type-row .text {
		color: #000;
	}
	.icon-type-row-ac {
		color: #fff;
		background: #007aff !important;
	}
	.icon-type-row-ac .text {
		color: #fff;
	}
	.icon-type-row-box .icon-type-row {
		background: none;
		box-shadow: none;
		border-radius: 0;
	}
	.icon-type-row-box .line {
		border-top: 2rpx solid rgba(0, 0, 0, 0.13);
		width: 60%;
		margin: 3rpx auto;
	}
</style>
